<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>

    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script>
      new Vue({
        el: "#app",

        data: {
          list: [],
        },

        mounted() {
          axios
            .get(
              "https://www.fastmock.site/mock/6673e5cbf22088bb115bf6470534724f/api-a/getList"
            )
            // .then((res) => {
            //   // 将后端返回的数据赋值给 this.list
            //   console.log(res);
            //   //   this.list = res.data.list;
            //   this.list = res.data.data.list;
            // })
            .then(({ data }) => {
              this.list = data.data.list;
            })
            .catch((error) => {
              console.error(error);
            });
        },
      });

      var obj = { name: "zhagnsan", age: 18, data: { name: "lisi" } };

      var { name, age } = obj; //

      // var { name } = obj;  => var name = obj.name
      // var { age } = obj;
      // var age = obj.age
      // console.log("age", age);

      // var { data } = obj;
      // var { age } = data; // 找到 data.name "lisi" 赋值给 name 这个变量

      // // var {
      // //   data: { name },
      // // } = obj;

      // console.log(age);
    </script>
  </body>
</html>
